<template>
    <div class="flex h-full">
        <!-- 侧边栏 -->
        <div class="w-[15vw] bg-[#006263] text-white flex flex-col items-center p-4 space-y-6">
            <!-- 导航链接 -->
            <div class="flex items-center flex-col">
                <div class="text-xl font-bold">地中海贫血筛查平台</div>
                <div class="text-xl font-bold">管理后台</div>
            </div>
            <var-button block color="#FFFFFF" @click="goMain">主页</var-button>
            <var-button block color="#FFFFFF" @click="goUser">用户管理</var-button>
            <var-button block color="#FFFFFF" @click="goDept">科室管理</var-button>
            <var-button block color="#FFFFFF" @click="goPatient">病人管理</var-button>
            <var-button block color="#FFFFFF" @click="goAppro">用户身份审批</var-button>
            <div class="flex-grow"></div>
            <Icon type="back" extraclass="icon" size="40" color="#FFFFFF" @click="goHome"></Icon>
        </div>
        <!-- 主内容区域 -->
        <div class="w-[85VW] h-full bg-gray-100 overflow-auto">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    name: 'main1',
    methods: {
        goMain() {
            this.$router.push('/manager/panel');
        },
        goUser() {
            this.$router.push('/manager/userManagement');
        },
        goDept() {
            this.$router.push('/manager/deptManagement');
        },
        goPatient() {
            this.$router.push('/manager/patientManagement');
        },
        goAppro() {
            this.$router.push('/manager/appropvals');
        },
        goHome() {
            this.$router.push('/user');
        }
    },
    computed: {
        user() {
            return this.$store.state.user;
        }
    }
};
</script>

<style></style>
